<template>
	<div>
		<div style="padding: 30px;">
			<div style="margin-bottom: 20px"><el-button type="warning" @click="back">返回列表页面</el-button></div>
			<el-row :gutter="20">
				<el-col :span="3">
					<div style="width: 200px;height: 150px;border: 1px black solid;">
						<img :src="userInfo.portrait" alt="头像" style="width: 100%;height: 100%;">
					</div>
					<!--<p style="cursor: pointer" @click="changeVia">修改头像</p>-->
				</el-col>
				<el-col :span="21" class="info-list">
					<el-col class="pad" :span="24">
						<el-col :span="6"><span class="span">用户ID：</span><el-tag>{{userInfo.id}}</el-tag></el-col>
						<el-col :span="6"><span class="span">用户昵称：</span><el-tag>{{userInfo.nickname}}</el-tag><span @click="changeNickname"></span></el-col>
						<el-col :span="6"><span class="span">用户姓名：</span><el-tag>{{userInfo.nickname}}</el-tag></el-col>
						<el-col :span="6"><span class="span">性别：</span><el-tag>{{userInfo.sex == 1 ? '男' : '女'}}</el-tag></el-col>
					</el-col>
					<el-col class="pad" :span="24">
						<el-col :span="6"><span class="span">手机号：</span><el-tag>{{userInfo.phone}}</el-tag></el-col>
						<el-col :span="6"><span class="span">会员卡号：</span><el-tag>{{userInfo.cardno}}</el-tag></el-col>
						<el-col :span="6"><span class="span">身份证号：</span><el-tag>{{userInfo.identify}}</el-tag></el-col>
						<el-col :span="6"><span class="span">生日：</span><el-tag>{{userInfo.birthday}}</el-tag></el-col>
					</el-col>
					<el-col class="pad" :span="24">
						<el-col :span="6"><span class="span">地区：</span><el-tag>{{userInfo.area}}</el-tag></el-col>
						<el-col :span="6"><span class="span">渠道：</span><el-tag>{{userInfo.channel}}</el-tag></el-col>
						<el-col :span="6" style="display: flex;justify-content: space-between">
							<span class="span">级别：</span>
							<div style="width: 160px">
								<el-select v-model="userInfo.level" clearable placeholder="级别">
									<el-option v-for="item,index in level" :label="item.name" :value="item.id"
:key="index"></el-option>
								</el-select>
							</div>
							<el-button type="danger" @click="z">修改</el-button>
						</el-col>
						<el-col :span="6" style="display: flex;justify-content: space-between">
							<span class="span">所属门店：</span>
							<div style="width: 160px">
								<el-select v-model="userInfo.store" clearable placeholder="所属门店">
									<el-option v-for="item,index in roles" :label="item.name" :value="item.id" :key="index"></el-option>
								</el-select>
							</div>
							<el-button type="danger" @click="q">修改</el-button>
							<!--<span @click="q">修改</span>-->
						</el-col>
					</el-col>
					<el-col class="pad" :span="24">
						<el-col :span="6"><span class="span">创建时间：</span><el-tag>{{userInfo.create_time}}</el-tag></el-col>
						<el-col :span="6"><span class="span">最后登录时间：</span><el-tag>{{userInfo.last_login_time}}</el-tag></el-col>
					</el-col>
				</el-col>
				<h3>收货地址：</h3>
				<el-col v-for="item,index in userInfo.addresses" :key="index" class="pad" :span="24">
					<span class="span" style="margin-right: 20px">{{ index + 1 }}</span>
					<el-tag class="right-space">{{ userInfo.nickname }}</el-tag>
					<el-tag class="right-space">{{ userInfo.phone }}</el-tag>
					<el-tag>{{ item }}</el-tag>
				</el-col>
				<h3>提现账户：<el-button type="danger" @click="resetCode">重置安全码</el-button></h3>
				<el-col v-for="item,index in userInfo.bankAccounts" :key="index" class="pad" :span="24">
					<span class="span" style="margin-right: 20px">{{ index + 1 }}</span>
					<el-tag class="right-space">{{ item.name }}</el-tag>
					<el-tag class="right-space">{{ item.bankName }}</el-tag>
					<el-tag>{{ item.cardNo }}</el-tag>
					<span style="color: red;margin-left: 20px;" v-if="item.isdefault == 0">默认账户</span>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import { getRoleList, getUserInfo , editUser, updateSafeCode} from '@/api/api';

	export default {
		data() {
			return {
				store: this.$route.query.store,
				userInfo: {},
				roles: [],
				showChangeMend: false,
				showChangeLevel: false,
				chageLevel: '',
				changeMend: '',
				level: [
					{name: '一级',id: '1'},
					{name: '二级',id: '2'},
					{name: '三级',id: '3'}
				]
			}
		},
		methods: {
			back() {
				this.$router.push('/user/list')
			},
			//获取角色类型列表
			getRoles() {
				let para = {};
				getRoleList(para).then((res) => {
					this.roles = res.data.data;
				});
			},
			handleView() {
				let para = {
					id: this.$route.query.id
				}
				getUserInfo(para).then(res => {
					this.userInfo = Object.assign({},res.data)
					this.roles.map(v => {
						if(v.id == this.userInfo.store) {
							this.userInfo.store =  v.name
						}
					})
					this.userInfo.birthday = this.moment(this.userInfo.birthday).format("YYYY-MM-DD")
					this.userInfo.create_time = this.moment(this.userInfo.create_time).format("YYYY-MM-DD HH:mm:ss")
					this.userInfo.last_login_time = this.moment(this.userInfo.last_login_time).format("YYYY-MM-DD HH:mm:ss")
				})
			},
			changeVia() {// 修改头像
				alert('修改头像')
			},
			z() {
				this.$confirm('确定要修改吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let para = {
						id: this.$route.query.id,
						level: this.userInfo.level
					}
					editUser(para).then(res => {
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
						this.handleView()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改'
					});
				});
				
			},
			changeNickname() {// 修改昵称
				alert('修改昵称')
			},
			q() {
				this.$confirm('确定要修改吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let para = {
						id: this.$route.query.id,
						roleId: this.userInfo.store
					}
					editUser(para).then(res => {
						this.handleView()
						this.$message({
							type: 'success',
							message: '更改成功!'
						});
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改'
					});
				});
				
			},
			resetCode() {
				this.$confirm('确定要重置吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let para = {
						userId: this.$route.query.id
					}
					updateSafeCode(para).then(res => {
						this.$message({
							type: 'success',
							message: '重置成功'
						});
						this.handleView()
					})
				}).catch(() => {
				
				});
			}
		},
		mounted() {
			this.getRoles();
			this.handleView()
		}
	}

</script>

<style lang="scss" scoped>
	.pad {
		padding: 10px 0;
	}
	.right-space {
		margin-right: 20px;
	}
	.info-list {
		
		.span {
			display: inline-block;
			width: 100px;
		}
	}
</style>
